<template>
  <div class="addaddress">
      <div class="item">
          <input type="text" placeholder="姓名" v-model="userName">
      </div>
      <div class="item">
          <input type="text" placeholder="手机号" v-model="telNumber">
      </div>
      <div class="item">
          <!-- 小程序原生组件: 从底部谈起的滚动选择器(省市区) -->
          <picker mode="region"
           @change="bindRegionChange"
           :value="region"
           :custom-item="customItem">
           <input type="text" placeholder="省份、城市、区县" v-model="address">
          </picker>
      </div>
      <div class="item">
          <input type="text" placeholder="详细地址，如：街道、小区、门牌号" v-model="detailaddress">
      </div>
      <div class="item itemend">
          <checkbox-group @change="checkboxChange">
              <label class="checkbox">
                  <checkbox class="box"
                   value="true"
                   :checked="checked"
                   color="#b4282d"></checkbox>
                   设置为默认地址
              </label>
          </checkbox-group>
          <div @click="wxaddress">一键导入微信</div>
      </div>
      <div class="footer" @click="saveAddress">保存</div>
  </div>
</template>

<script>
import { get, post, getStorageOpenid } from '../../utils'
export default {
    data() {
        return {
            userName: '',
            telNumber: '',
            region: [],
            customItem: '请选择',
            address: '',
            detailaddress: '',
            checked: false,
            openId: '',
            res: '',
            id: ''
        }
    },
    mounted() {
        this.openId = getStorageOpenid()
        // 判断从上一个页面跳转至当前页面所带的参数
        if(this.$root.$mp.query.res) {
            // 将带过来的数据进行转码(URL->JSON)
            this.res = JSON.parse(decodeURIComponent(this.$root.$mp.query.res))
            // console.log(this.res)
            this.userName = this.res.userName
            this.telNumber = this.res.telNumber
            this.address = `${this.res.provinceName}${this.res.cityName}${this.res.countyName}`
            this.detailaddress = this.res.detailInfo
        }
        if(this.$root.$mp.query.id) {
            this.id = this.$root.$mp.query.id
            this.getDetail()
        }
    },
    methods: {
        async getDetail () {
            const data = await get('/address/detailAction', {
                id: this.id
            })
            // console.log(data)
            let detail = data.data
            this.userName = detail.name
            this.telNumber = detail.mobile
            this.address = detail.address
            this.detailaddress = detail.address_detail
            this.checked = detail.is_default === 1 ? true : false
        },
        checkboxChange(e) {
            // console.log(e)
            this.checked = e.mp.detail.value[0]
        },
        bindRegionChange(e) {
            // console.log(e)
            let value = e.mp.detail.value
            this.address = `${value[0]} - ${value[1]} - ${value[2]}`
        },
        wxaddress() {
            wx.chooseAddress({
                success: (result) => {
                    // console.log(result)
                    this.userName = result.userName
                    this.telNumber = result.telNumber
                    this.address = `${result.provinceName} - ${result.cityName} - ${result.countyName}`
                    this.detailaddress = result.detailInfo
                }
            })
        },
        async saveAddress() {
            const data = await post('/address/saveAction', {
                userName: this.userName,
                telNumber: this.telNumber,
                address: this.address,
                detailaddress: this.detailaddress,
                checked: this.checked,
                openId: this.openId,
                addressId: this.id
            })
            if(data.data) {
                wx.showToast({
                    title: '添加成功',
                    icon: 'success',
                    duration: 2000,
                    mask: true,
                    success: (result) => {
                        setTimeout(() => {
                            wx.navigateBack({
                                delta: 1
                            })
                        },2000)
                    }
                })
            }
        }
    }
}
</script>

<style scoped>
@import './style.css';
</style>